<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>空白</title>
    <style>
        #d1 {
            height: 500px;
            background-color: gray;
            /*空格也是文字,fs设置为0图片就没有空格了*/
            font-size: 0px;
        }

        /*文字再用span加上字体大小，就消除空白了*/
        #d1 > span {
            font-size: 40px;
        }

        .one {
            background-color: red;
        }

        .two {
            background-color: skyblue;
        }

        .three {
            background-color: green;
        }

        #d2 {
            width: 600px;
            background-color: skyblue;
        }
        #d2 > span{
            font-size: 20px;
        }
        #img4 {
            /*使用vertical-align*/
            vertical-align: bottom;
        }
    </style>
</head>
<body>
<div id="d1">
    <span class="one">人之初</span>
    <span class="two">性本善</span>
    <span class="three">性相近</span>

    <hr>
    <img id="img1" src="../../images/test1.png" width="100px" height="100px">
    <img id="img2" src="../../images/test1.png" width="100px" height="100px">
    <img id="img3" src="../../images/test1.png" width="100px" height="100px">

</div>

<img src="../../images/行内块.png" width="450px">
<!--底部会有一条缝-->
<!--使用vertical-align消除最低的空白，同时让x上中下的动-->
<div id="d2">
    <img id="img4" src="../../images/test1.png" width="100px" height="100px"><span>x</span>
</div>
</body>
</html>